<template>
  <el-row>
    <el-col :span="6">
      <el-form-item label="种母耳号：">
        <el-input v-model="form.basicInforId" />
      </el-form-item>
    </el-col>

    <el-col :span="6" style="margin-left: 10px;">
      <el-form-item label="转种日期：">
        <el-date-picker v-model="form.dateofConversion" type="daterange" range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期"
        value-format="YYYY-MM-DD" :size="size" @change="hhhh"/>
      </el-form-item>
    </el-col>

    <el-col :span="11" style="text-align:right;">
      <el-button type="danger" >查询</el-button>
      <el-button>重置</el-button>
    </el-col>
  </el-row>
  <hr size="6" style="background-color:rgb(232.8, 233.4, 234.6)">
  <el-row style="margin-top: 10px;">
    <el-col>
      <el-button type="danger" :icon="Plus" @click="router.push('/AddBreedingSows')">新增</el-button>
      <el-button type="danger" :icon="Delete">删除</el-button>
    </el-col>
  </el-row>
  <hr size="6" style="background-color:rgb(232.8, 233.4, 234.6);margin-bottom: 10px;margin-top: 10px;">
  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange">
    <el-table-column type="selection"  width="55" />
    <el-table-column property="breedingSowId" label="序号" />
    <el-table-column property="documentNumber" label="单据号" width="150" />
    <el-table-column property="openingDate" label="期初日期" width="150">
      <template #default="scope">
        {{ scope.row.openingDate.substr(0,10) }}
      </template>
    </el-table-column>
    <el-table-column property="earNumber" label="耳号" />
    <el-table-column property="bedroomName" label="栋舍名称" />
    <el-table-column property="fieldName" label="栏位" />
    <el-table-column property="dateofConversion" label="转种日期" width="180">
      <template #default="scope">
        {{ scope.row.dateofConversion.replace('T',' ').substr(0,19) }}
      </template>
    </el-table-column>
    <el-table-column property="weight" label="重量" />
    <el-table-column property="createdOwner" label="创建人" />
    <el-table-column label="创建时间" width="180">
      <template #default="scope">
        <el-text v-if="scope.row.createdTime==null">{{ scope.row.createdTime }}</el-text>
        <el-text v-else> {{ scope.row.createdTime.replace('T',' ').substr(0,19) }}</el-text>
      </template>
    </el-table-column>
    <el-table-column property="updateOwner" label="修改人" />
    <el-table-column label="修改时间" width="180">
      <template #default="scope">
        <el-text v-if="scope.row.updateTime==null">{{ scope.row.updateTime }}</el-text>
        <el-text v-else>{{ scope.row.updateTime.replace('T',' ').substr(0,19) }}</el-text>
      </template>
    </el-table-column>
    <el-table-column property="examineOwner" label="审核人" />
    <el-table-column label="审核时间" width="180">
      <template #default="scope">
        <el-text v-if="scope.row.examineTime==null">{{ scope.row.examineTime }}</el-text>
        <el-text v-else>{{ scope.row.examineTime.replace('T',' ').substr(0,19) }}</el-text>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="200">
      <template #default>
        <el-button type="primary" link>审核</el-button>
        <el-button type="primary" link>编辑</el-button>
        <el-button type="primary" link>删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <table>
    <tr>
      <td>
        <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
        :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页"
        layout="total, slot, prev, pager, next"
        :total="form.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        ,每页显示{{ form.pageSize }}条,当前第{{ form.pageIndex }}/{{ form.pageCount }}页
        <el-button class="btn-prev" @click="handleCurrentChange(1)" :disabled="form.pageIndex==1">首页</el-button>
        </el-pagination>
      </td>

      <td>
        <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
        :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页"
        layout=" slot, sizes, jumper"
        :total="form.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        <el-button class="btn-prev" @click="handleCurrentChange(form.pageCount)" :disabled="form.pageIndex==form.pageCount">尾页</el-button>
        </el-pagination>
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { Delete, Plus } from '@element-plus/icons-vue';
import {ref,reactive, onMounted} from 'vue'
import type { TableInstance } from 'element-plus'
import axios from 'axios';
import {useRouter,useRoute} from 'vue-router'
import { table } from 'console';

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

//创建路由实例
const router=useRouter()
const route=useRoute()

const size = ref<'default' | 'large' | 'small'>('default')

const form =reactive({
  pageIndex:1,
  pageSize:3,
  totalCount:0,
  pageCount:0,
  basicInforId: '',
  startTime:'',
  endTime:'',
  dateofConversion:''
})

const hhhh=()=>{
  console.log(form.dateofConversion)
  console.log(form.dateofConversion[0])
  console.log(form.dateofConversion[1])
}

const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref([])
  const handleSelectionChange = (val:any) => {
  multipleSelection.value = val
}

//获取种母期初
const tableData=ref([])
const handleBreedingSow=()=>{
  axios.post(apiBedinUrl+'/api/BreedingSows/GetBreedingSow',{
    pageIndex: form.pageIndex,
    pageSize: form.pageSize,
    basicInforId: form.basicInforId||0,
    startTime: form.startTime||null,
    endTime: form.endTime||null
  })
  .then(res=>{
    console.log(res.data)
    tableData.value=res.data.data.list;
    form.totalCount=res.data.data.totalCount;
    form.pageCount=res.data.data.pageCount;
  })
}

//分页
const handleSizeChange = (val: number) => {
  form.pageSize=val
  handleBreedingSow()
}
const handleCurrentChange = (val: number) => {
  form.pageIndex=val
  handleBreedingSow()
}

//创建生命周期函数钩
onMounted(()=>{
  handleBreedingSow()
})
</script>
